import React from 'react'
import {Table,Button} from 'antd';
  const data = [];
  for (let i = 0; i < 46; i++) {
	data.push({
	  key: i,
	  name: `Edward King ${i}`,
	  age: 32,
	  address: `London, Park Lane no. ${i}`,
	});
  }
  
class FromDemo extends React.Component {
	constructor (props) {
		super(props);
		//初始化变量
		this.state = {
			selectedRowKeys:[],
			columns: [
				{
				  title: 'Name',
				  dataIndex: 'name',
				},
				{
				  title: 'Age',
				  dataIndex: 'age',
				},
				{
				  title: 'Address',
				  dataIndex: 'address',
				},  {
					title: '操作',
					key: 'action',
					render: (text,record,index) => (
						<Button  type="primary" onClick={this.getData.bind(this,text,record,index)}>查看</Button>
					),
				  },
			  ]
		};
	};
	getData(text,record,index){ // 获取行 按钮点击 的参数
		console.log(text,record,index)
	}
	onSelectChange = selectedRowKeys => { //  勾选行回调
		console.log('selectedRowKeys changed: ', selectedRowKeys);
		this.setState({ selectedRowKeys });
	  };
	render() {
		const { selectedRowKeys } = this.state;
		const rowSelection = { // 设置行点击的 事件
		  selectedRowKeys,
		  onChange: this.onSelectChange,
		  hideDefaultSelections: false,
		  selections: [
			{
			  key: 'all-data',
			  text: '选择所有',
			  onSelect: () => {
				this.setState({
				  selectedRowKeys: [...Array(46).keys()], // 0...45
				});
			  },
			},
			{
			  key: 'odd',
			  text: '选择 odd',
			  onSelect: changableRowKeys => {
				let newSelectedRowKeys = [];
				newSelectedRowKeys = changableRowKeys.filter((key, index) => {
				  if (index % 2 !== 0) {
					return false;
				  }
				  return true;
				});
				this.setState({ selectedRowKeys: newSelectedRowKeys });
			  },
			},
			{
			  key: 'even',
			  text: '选择 Even ',
			  onSelect: changableRowKeys => {
				let newSelectedRowKeys = [];
				newSelectedRowKeys = changableRowKeys.filter((key, index) => {
				  if (index % 2 !== 0) {
					return true;
				  }
				  return false;
				});
				this.setState({ selectedRowKeys: newSelectedRowKeys });
			  },
			},
		  ],
		};
		return (
						<Table rowSelection={rowSelection} columns={this.state.columns} dataSource={data} 
						// onRow={record => {
						// 	return {
						// 	onClick: event => {
						// 		console.log(event)
						// 		console.log(event.target)
						// 		console.log(record)
						// 	}, // 点击行
						// 	onDoubleClick: event => {},
						// 	onContextMenu: event => {},
						// 	onMouseEnter: event => {}, // 鼠标移入行
						// 	onMouseLeave: event => {},
						// 	};
						// }}
						>
						
						</Table>

		)
	}
}

export default FromDemo